<template>
  <div class="RentAndSale">
    <div class="header">
      <h3>订单管理</h3>
    </div>
    <div class="formArea">
      <el-form ref="form" :model="BindForm" class="ele-form" label-width="100px" label-position="left">
        <el-form-item label="订单搜索:">
          <el-col :span="2">
            <el-select v-model="BindForm.type" clearable filterable>
              <el-option value="0" label="手机号" />
              <el-option value="1" label="订单号" />
            </el-select>
          </el-col>
          <el-col :span="6" style="margin-left:12px;">
            <el-input
              v-if="BindForm.type == '0'"
              v-model="BindForm.phone"
              class="ele-input"
              placeholder="手机号"
            />
            <el-input v-else-if="BindForm.type == '1'" v-model="BindForm.orderSn" class="ele-input" placeholder="订单号" />
          </el-col>
        </el-form-item>
        <!--        <el-form-item label="门店:">
          <el-col :span="4">
            <city-select ref="citySelect" v-model="formData.address" style="margin-left: 0" @change="changedAddress" />
          </el-col>
          <el-col :span="5">
            <store-select ref="storeSelect" v-model="formData.store" field="id" />
          </el-col>
        </el-form-item>-->
        <el-form-item prop="allCity" label="地区:">
          <el-col :span="4" style="align-items: center;display: flex;">
            <!--            <el-checkbox v-model="BindForm.allCity" label="全部" border @change="changedAllCity" />-->
            <city-select ref="citySelect" v-model="BindForm.address" style="margin-left: 0" :is-hide="isHide" @change="changedAddress" />
          </el-col>
          <el-col :span="5">
            <store-select ref="storeSelect" v-model="BindForm.store" field="id" />
          </el-col>
        </el-form-item>
        <!--        <el-form-item prop="store" label="门店:">
          <el-col :span="24">
            <store-select ref="storeSelect" v-model="BindForm.store" field="id" />
          </el-col>
        </el-form-item>-->
        <el-form-item label="查询时段:">
          <el-col :span="24">
            <el-date-picker
              v-model="BindForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="center"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            />
            <el-button plain style="margin-left:10px" @click="setWeek">最近七天</el-button>
            <el-button plain @click="setMonth">最近一个月</el-button>
          </el-col>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchLoading">筛选</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>

      </el-form>

    </div>
    <div class="butList">
      <el-radio-group v-model="BindForm.state" @change="handelOrderType">
        <el-radio-button label="">全部订单</el-radio-button>
        <el-radio-button label="101">待付款</el-radio-button>
        <el-radio-button label="201">待发货</el-radio-button>
        <el-radio-button label="302">待用户自提</el-radio-button>
        <el-radio-button label="301">待用户收货</el-radio-button>
        <el-radio-button label="401">使用中</el-radio-button>
        <el-radio-button label="501">待商家取货</el-radio-button>
        <el-radio-button label="502">待商户收货</el-radio-button>
        <el-radio-button label="503">待用户结算</el-radio-button>
        <el-radio-button label="601">订单取消</el-radio-button>
        <el-radio-button label="701">超时已关闭</el-radio-button>
        <el-radio-button label="801">已完成</el-radio-button>
      </el-radio-group>
    </div>
    <table class="tableCustom">
      <thead>
        <tr>
          <td>商品</td>
          <td>单价/数量</td>
          <td>配送方式</td>
          <td>订单商品状态</td>
          <td>卖家/收货人</td>
          <td>付款方式/金额</td>
          <td>操作</td>
        </tr>
      </thead>

      <tbody v-for="(inf, index) in dataBind" :key="index">
        <!--        <tr class="ele-tr-top">
          <td colspan="7" />
        </tr>-->
        <tr class="ele-tr-content">
          <td colspan="7" class="ele-td-first">
            <div>
              <p>
                <span class="add-number">订单编号：{{ inf.orderSn }} </span>
                &nbsp;&nbsp;&nbsp; &nbsp;
                <b>下单日期</b>&nbsp;<span class="add-time">
                  {{ inf.addTime }}</span>
              </p>
              <el-button
                type="text"
                @click="routerOrderDetails(inf, index)"
              >查看详情</el-button>
            </div>
          </td>
        </tr>
        <!-- 要循环的区域 -->
        <tr
          v-for="(data, index1) in inf.goodslist"
          :key="index1"
          class="for-list"
        >
          <!-- 商品 -->
          <td>
            <div>
              <img :src="data.goodsPic" alt="">
            </div>
            <div>
              <p>
                {{ data.goodsName }}
                <el-tag
                  v-if="data.deviceType == '1'"
                  type="success"
                >软链</el-tag>
                <el-tag
                  v-if="data.deviceType === '2'"
                  type="success"
                >医柜</el-tag>
              </p>
              <p class="textWorp">{{ data.goodsSpec }}</p>
              <p>设备编号:{{ data.deviceNo }}</p>
              <p>
                <el-button
                  v-if="data.goodsState === '101'"
                  type="danger"
                  plain
                  size="mini"
                >待付款</el-button>
                <el-button
                  v-if="data.orderStatus === '201'"
                  type="danger"
                  plain
                  size="mini"
                >待发货</el-button>
                <el-button
                  v-if="data.orderStatus === '302'"
                  type="danger"
                  plain
                  size="mini"
                >待用户自提</el-button>
                <el-button
                  v-if="data.orderStatus === '301'"
                  type="danger"
                  plain
                  size="mini"
                >待用户取货</el-button>
                <el-button
                  v-if="data.orderStatus === '401'"
                  type="danger"
                  plain
                  size="mini"
                >使用中</el-button>
                <el-button
                  v-if="data.orderStatus === '501'"
                  type="success"
                  plain
                  size="mini"
                >待商家取货</el-button>
                <el-button
                  v-if="data.orderStatus === '502'"
                  type="danger"
                  plain
                  size="mini"
                >待商户取货</el-button>
                <el-button
                  v-if="data.orderStatus === '503'"
                  type="danger"
                  plain
                  size="mini"
                >待用户结算</el-button>
                <el-button
                  v-if="data.orderStatus === '601'"
                  type="success"
                  plain
                  size="mini"
                >订单取消</el-button>
                <el-button
                  v-if="data.orderStatus === '701'"
                  type="success"
                  plain
                  size="mini"
                >超时已关闭</el-button>
                <el-button
                  v-if="data.orderStatus === '801'"
                  type="success"
                  plain
                  size="mini"
                >已完成</el-button>
              </p>
            </div>
          </td>
          <!-- 单价数量 -->
          <td class="baojia">
            <ul>
              <!--              <li>
                <el-tag type="primary">满{{ inf.couponPrice }}赠送</el-tag>
                <el-tag type="primary">{{ inf.couponPrice }}折券</el-tag>
              </li>-->
              <!--              <li class="dazhe">
                <span>￥{{ data.price }}</span><del>￥{{ data.price }}</del>
              </li>-->
              <li>
                <span>￥{{ data.price }}</span>
              </li>
              <li class="shuliang">
                <span>X{{ data.number }}</span>
              </li>
            </ul>
          </td>
          <!-- 配送方式 -->
          <td>
            <p v-if="data.deliverySn == 'normal'">普通配送</p>
            <p v-if="data.deliverySn == 'self'">自提配送</p>
            <p v-if="data.deliverySn == 'subscribe'">预约配送</p>
            <p v-if="data.deliverySn == 'urgent'">加急</p>
            <p>￥{{ data.freightPrice }}</p>
          </td>
          <!-- 订单状态 -->
          <td>
            <span v-if="data.orderStatus == '101'">待付款</span>
            <span v-if="data.orderStatus == '201'">待发货</span>
            <span v-if="data.orderStatus == '302'">待用户自提</span>
            <span v-if="data.orderStatus == '301'">待用户取货</span>
            <span v-if="data.orderStatus == '401'">使用中</span>
            <span v-if="data.orderStatus == '501'">待取货</span>
            <span v-if="data.orderStatus == '502'">待商户取货</span>
            <span v-if="data.orderStatus == '503'">待用户结算</span>
            <span v-if="data.orderStatus == '601'">取消订单</span>
            <span v-if="data.orderStatus == '701'">超时已关闭</span>
            <span v-if="data.orderStatus == '801'">已完成</span>
          </td>
          <!-- 收货人 -->
          <td
            v-if="index1 === 0"
            class="ele-td-border"
            :rowspan="inf.goodslist.length"
          >
            <p>{{ data.userName }}</p>
            <p>{{ data.userPhone }}</p>
          </td>

          <!-- 支付方式 -->
          <td
            v-if="index1 === 0"
            class="ele-td-border"
            :rowspan="inf.goodslist.length"
          >
            <p v-if="data.payType == 'WEIXIN'">微信</p>
            <p v-if="data.payType == 'WEIXINPAYSCORE'">支付宝</p>
            <p>￥{{ data.payAmount || 0 }}</p>
          </td>
          <!-- 小计 -->
          <td
            v-if="index1 === 0"
            class="ele-td-border"
            :rowspan="inf.goodslist.length"
          >
            <p>小计金额</p>
            <p>￥{{ data.totalPrice || 0 }}</p>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="foot-pagination">
      <div class="pagination">
        <el-pagination
          :page-sizes="[20, 30, 40, 50]"
          :page-size="BindForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="BindForm.page"
          :total="page.total"
          background
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { orderList } from '@/api/order'
// import { storeList } from '@/api/customAPI/shop/store'
import CitySelect from '@/components/CitySelect'
import StoreSelect from '@/components/StoreSelect'
export default {
  name: 'RentAndSale',
  components: { CitySelect, StoreSelect },
  data() {
    return {
      // 搜索keyValue
      isHide: false,
      /* formData: {
        allCity: true,
        address: {
          province: null,
          city: null,
          village: null
        },
        // 搜索类型
        type: '',
        // 订单搜索（手机号）
        phone: '',
        //  订单商品状态
        state: '',
        // 开始时间
        startTime: '',
        // 结束时间
        endTime: '',
        // 页码
        page: 1,
        // 页面数据量
        limit: 20
      },*/
      BindForm: {
        type: null,
        phone: null,
        orderSn: null,
        shopId: localStorage.getItem('shopId'),
        allCity: true,
        store: null,
        time: null,
        state: '',
        page: 1,
        limit: 20,
        address: {
          province: null,
          city: null,
          village: null
        }
      },
      // 分页
      page: {
        total: 0
      },
      popSty: false,
      textarea: '',
      dataBind: [],
      storelist: []
    }
  },
  created() {
    this.init()
  },
  /* mounted() {
    this.searchLoading()
    this.storeInfo()
  },
  activated() {
    this.searchLoading()
    this.storeInfo()
  },*/
  methods: {
    init() {
      this.searchLoading()
    },
    // changedAllCity() {
    //   const vm = this
    //   if (vm.BindForm.allCity) {
    //     if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
    //       vm.$refs.citySelect.resetFields()
    //     }
    //   } else {
    //     if (!vm.BindForm.address.province || !vm.BindForm.address.city || !vm.BindForm.address.village) {
    //       vm.BindForm.allCity = true
    //     }
    //   }
    // },
    changedAddress() {
      const vm = this
      if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
        vm.BindForm.allCity = false
      } else {
        vm.BindForm.allCity = true
      }

      const provinceId = vm.BindForm.address.province ? vm.BindForm.address.province.code : null
      const cityId = vm.BindForm.address.city ? vm.BindForm.address.city.code : null
      const villageId = vm.BindForm.address.village ? vm.BindForm.address.village.code : null

      vm.$refs.storeSelect.refresh(provinceId, cityId, villageId)
    },
    /** router */
    routerOrderDetails(row, index) {
      switch (row.goodslist[0].orderStatus) {
        //   "101">待付款
        case 101:
          this.$router.push({
            name: 'PendingPayment',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "201">待发货
        case 201:
          this.$router.push({
            name: 'Consignment',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "302">待用户自提
        case 302:
          this.$router.push({
            name: 'DYHZT',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "301">待用户收货
        case 301:
          this.$router.push({
            name: 'DYHSH',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "401">使用中
        case 401:
          this.$router.push({
            name: 'SYZ',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "501">待商家取货
        case 501:
          this.$router.push({
            name: 'DQH',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "502">待商户收货
        case 502:
          this.$router.push({
            name: 'DSHSH',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "503">待用户结算
        case 503:
          this.$router.push({
            name: 'DJS',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "601">订单取消
        case 601:
          this.$router.push({
            name: 'closed',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "701">订单已关闭
        case 701:
          this.$router.push({
            name: 'closed',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
        //   "801">已完成
        case 801:
          this.$router.push({
            name: 'YWC',
            params: {
              rows: row,
              status: row.goodslist[0].orderStatus
            }
          })
          break
      }
    },
    sizeChange(e) {
      this.BindForm.limit = e
      this.searchLoading()
    },
    currentChange(e) {
      this.BindForm.page = e
      this.searchLoading()
    },
    handelOrderType(v) {
      this.searchLoading()
    },
    /** 搜索 */
    async searchLoading() {
      const data = this.$XEUtils.clone(this.BindForm, true)
      delete data.type
      delete data.allCity
      if (this.BindForm.type == '0') {
        if (data.phone && !/^[1][3-9][0-9]{9}$/.test(data.phone)) {
          return this.$message.error('请输入正确的电话号码')
        }
      }

      if (data.time && data.time.length === 2) {
        data['startTime'] = data.time[0]
        data['endTime'] = data.time[1]
      }
      if (data.address.province) {
        /* console.log(data.address)*/
        data['provinceId'] = data.address.province.code
      }
      if (data.address.city) {
        data['cityId'] = data.address.city.code
      }
      if (data.store) {
        data['storeId'] = data.store
      }
      delete data.address
      delete data.time
      delete data.store
      await orderList(data).then(inf => {
        this.dataBind = inf.data.data.list
        this.page.total = inf.data.data.total
      })
    },
    /* async storeInfo() {
      const data = {
        province: '',
        city: '',
        area: '',
        searchKey: '',
        page: 1,
        limit: 0
      }
      /!* if(this.formData.address.province){
        data.province=this.formData.address.province.code
      }
      if(this.formData.address.city){
        data.city=this.formData.address.city.code
      }*!/
      storeList(data).then(result => {
        this.storelist = result.data.data.list
      })
    },*/
    setWeek() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setMonth() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    /* /!** 最近一周 *!/
    getTimeWeek() {
      this.timeGet(7)
    },
    /!** 最近30天 *!/
    getTimeMonth() {
      this.timeGet(30)
    },
    timeGet(val) {
      const end = new Date()
      const start = new Date(end.getTime() - 3600 * 1000 * 24 * val)
      this.formData.startTime = `${start.getFullYear()}-${start.getMonth() +
        1}-${start.getDate()} ${start.getHours()}:${start.getMinutes()}:${start.getSeconds()}`
      this.formData.endTime = `${end.getFullYear()}-${end.getMonth() +
        1}-${end.getDate()} ${end.getHours()}:${end.getMinutes()}:${end.getSeconds()}`
    },*/
    resetForm() {
      this.$refs.citySelect.resetFields()
      this.$refs.form.resetFields()
      this.BindForm.type = ''
      this.BindForm.phone = ''
      this.BindForm.address.province = null
      this.BindForm.address.city = null
      this.BindForm.storeId = ''
      this.BindForm.time = null
      /* this.BindForm.startTime = ''
      this.BindForm.endTime = ''*/
      this.searchLoading()
    }
  }
}
</script>
<style lang="scss" scoped>
.RentAndSale {
  padding: 20px;
}
.RentAndSale > .butList {
  margin: 40px 0px;
}
.RentAndSale > .formArea {
  width: 100%;
  background: #f3f3f3;
  padding: 10px 30px;
  border-radius: 5px;
}
.RentAndSale > .formArea > .el-area {
  margin: 30px 0px;
}
.RentAndSale > .formArea > .el-area > span {
  display: inline-block;
  width: 80px;
}
.RentAndSale > .formArea > .el-area > .ele-input {
  width: 280px;
}
.tableCustom {
  width: 100%;
  border: 1px solid #f3f3f3;
  border-collapse: collapse;
  max-height: 550px;
  tr {
    td {
      border: 1px solid #f3f3f3;
    }
  }
  thead {
    background: #f3f3f3;
    td {
      height: 50px;
      border: none;
    }
    td:first-child {
      width: 30%;
    }
  }
  .ele-tr-top {
    height: 34px;
  }
  tbody {
    .ele-tr-content {
      background: #fbf9f9;
      .ele-td-first {
        div {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          padding: 0px 4% 0px 1%;
          p {
            .add-time {
              font-size: 14px;
              color: gray;
            }
            .add-number {
              color: gray;
            }
          }
        }
      }
    }
    .for-list {
      td:first-child {
        border: none;
        border-bottom: 1px solid #f3f3f3;
        padding-left: 2.5%;
        div {
          float: left;
        }
        div:first-child {
          width: 120px;
          height: 120px;
          padding: 15px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        div:last-child {
          margin-top: 10px;
          font-size: 13px;
          p:nth-child(2) {
            color: gray;
          }
        }
      }
      .baojia > ul {
        height: 100%;
        padding: 0px;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        li {
          padding: 5px 0px;
        }
        .dazhe {
          width: 50%;
          display: flex;
          justify-content: space-around;
        }
        .shuliang {
          font-size: 13px;
          color: gray;
        }
      }
      .ele-td-border {
        border-top: none;
        border-bottom: none;
      }
      .textWorp {
        width: 250px;
      }
    }
  }
}
.foot-pagination {
  width: 100%;
  .pagination {
    float: right;
    padding: 60px 0px 80px 0px;
  }
}
</style>
